<!DOCTYPE html>
<html>
<head>
    　　
    <meta charset="utf-8">
    　　<title>test</title>
    　　
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    　　
    <script>
        $(function () {
            /**var input = $('#J_input');
             //用来获取字数
             function getNum() {
                return input.val().length;
            }

             //渲染元素
             function render() {
                var num = getNum();
                //没有字数的容器就新建一个
                if ($('#J_input_count').length == 0) {
                    input.after('<span id="J_input_count"></span>');
                }
                ;
                $('#J_input_count').html(num + '个字');
            }

             //监听事件
             input.on('keyup', function () {
                render();
            });
             //初始化，第一次渲染 render();
             */


            /**var textCount = {
                bind: function () {
                    var self = this;
                    this.input.on('keyup', function () {
                        self.render();
                    });
                },
                getNum: function () {
                    return this.input.val().length;
                },
                //渲染元素
                render: function () {
                    var num = this.getNum();
                    if ($('#J_input_count').length == 0) {
                        this.input.after('<span id="J_input_count"></span>');
                    }
                    ;
                    $('#J_input_count').html(num + '个字');
                },
                input: null,
                init: function (config) {
                    this.input = $(config.id);
                    this.bind();
                    //这边范围对应的对象，可以实现链式调用
                    return this;
                }
            }
             $(function () {
                //在domready后调用
                textCount.init({id: '#J_input'}).render();
            })*/




        })


        var TextCount = (function () {
            //私有方法，外面将访问不到
            var _bind = function (that) {
                that.input.on('keyup', function () {
                    that.render();
                });
            }
            var _getNum = function (that) {
                return that.input.val().length;
            }
            var TextCountFun = function (config) {
            }
            TextCountFun.prototype.init = function (config) {
                console.log(this);
                this.input = $(config.id);
                _bind(this);
                return this;
            };
            TextCountFun.prototype.render = function () {
                var num = _getNum(this);
                if ($('#J_input_count').length == 0) {
                    this.input.after('<span id="J_input_count"></span>');
                }
                ;
                $('#J_input_count').html(num + '个字');
            };
            //返回构造函数
            return TextCountFun;
        })();
        $(function () {
            console.log(new TextCount());
            new TextCount().init({id: '#J_input'}).render();
        })

    </script>
</head>
<body>
<input type="text" id="J_input"/>
</body>
</html>